<template>
  <div id="search-article">
    <el-row :gutter="16">
      <el-col :span="16">
        <div v-if="articleList.length == 0" class="text-align-center">
          <el-divider></el-divider>
          <i class="el-icon-warning-outline fz-50"></i>
          <h4>暂无首页推荐文章!</h4>
          <h3>请到管理端添加</h3>
          <el-divider></el-divider>
        </div>  
        <article-card v-else v-for="(item, index) in articleList" :key="index" :info="item" />
        <el-pagination
          class="flex flex-space-between m-t-20"
          background
          hide-on-single-page
          :page-size="selectFrom.pageSize"
          @current-change="currentChange"
          :current-page.sync="selectFrom.currentPage"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </el-col>
      <el-col :span="8">
          <!-- 特别推荐 ↓ -->
          <special-recommend class="m-b-50" />
          <!-- 最新留言 ↓ -->
          <new-guests class="m-b-50" />
          <!-- 最新更新 ↓ -->
          <last-update-article v-if="selectFrom.title !== ''" />
      </el-col>
    </el-row>  
  </div>
</template>

<script>
import ArticleCard from '../components/ArticleCard'
import SpecialRecommend from '../components/SpecialRecommend'
import LastUpdateArticle from '../components/LastUpdateArticle'
import InfoCard from '../components/InfoCard'
import NewGuests from '../components/NewGuests'
export default {
  name: 'home',
  components: {
    ArticleCard,
    SpecialRecommend,
    LastUpdateArticle,
    NewGuests,
    InfoCard
  },
  created() {
    this.selectFrom.title = this.$route.query.title
    this.searchArticle()
  },
  watch: {
    '$route.query.title'() {
      this.selectFrom.title = this.$route.query.title
      this.searchArticle()
    }
  },
  data() {
    return {
      articleList: [],
      total: 100,
      selectFrom: {
        title: '',
        pageSize: 20,
        currentPage: 1,
      },
    }
  },
  methods: {
    async searchArticle() {
      let res = await this.api.post('/client/searchArticle', {
        ...this.selectFrom
      })
      if(res.code == 0) {
        this.articleList = res.data.articleList
        this.total = res.data.counts
      }
      else this.$message({type: 'warning', message: res.message })
    },
    currentChange(thisPage) {
      this.selectFrom.currentPage = thisPage
      this.searchArticle()
    },
  },

}
</script>

<style lang="scss">
#search-article {
  width: 1100px;
  margin: 0 auto;
  padding-top: 80px;
  // .left {
  //   padding:  10px 10px 10px 0px;
  //   border-radius: 3px;
  // }
  // .right {
  //   padding:  10px 0px 10px 10px;
  // }
}
</style>